import React, {useState} from "react";
import {View} from "ray";
import {Picker, BottomSheet} from "@ray-js/smart-ui";
import Strings from "@/i18n";


interface IProps{
  title?: string,
  columns: Array<any>
  children: React.ReactNode
  onChange: (e: any) => void
}

export default function PopupPicker ({
                                        title,
                                        columns,
                                        children,
                                        onChange,
                                    }:IProps){
  const [show,setShow] = useState(false);

  const handleChange = (e: any) => {
    onChange(e)
    setShow(false)
  }

  return (<View>
    <View onClick={() => setShow(true)}>
      {children}
    </View>
    <BottomSheet
      show={show}
      onClose={()=>setShow(false)}
    >
      <Picker
        showToolbar
        title={title}
        confirmButtonText={Strings.getLang('confirm')}
        cancelButtonText={Strings.getLang('cancel')}
        defaultIndex={2}
        onCancel={()=>setShow(false)}
        onConfirm={handleChange}
        columns={columns}
        onChange={onChange}
      />
    </BottomSheet>
  </View>)
}
